define(function() {

    const  { html, Component, render, linkState } = preact;

    const isEqual = function(A, B){
        //完美方案 使用lodash.isequal
        if(A === B){
            return true;
        }else{
            return JSON.stringify(A) === JSON.stringify(B);
        }

        console.log(A, B)
    }


    //参考 https://github.com/voronianski/react-swipe
    // https://github.com/voronianski/swipe-js-iso

    class ReactSwipe extends Component {

        constructor(props){
            super(props);
        }

        componentDidMount() {
            this.swipe = Swipe(this.containerEl, this.props.swipeOptions);
        }

        componentDidUpdate(prevProps) {
            // console.log("prevProps:", prevProps);
            const { childCount, swipeOptions } = this.props;
            const shouldUpdateSwipeInstance =
              prevProps.childCount !== childCount ||
              !isEqual(prevProps.swipeOptions, swipeOptions);
        
            if (shouldUpdateSwipeInstance) {
                console.log('swipe rerender');
              this.swipe.kill();
              this.swipe = Swipe(this.containerEl, this.props.swipeOptions);
            }
          }
        
          componentWillUnmount() {
            this.swipe.kill();
            this.swipe = void 0;
          }
        
          next() {
            this.swipe.next();
          }
        
          prev() {
            this.swipe.prev();
          }
        
          slide(...args) {
            this.swipe.slide(...args);
          }
        
          getPos() {
            return this.swipe.getPos();
          }
        
          getNumSlides() {
            return this.swipe.getNumSlides();
          }
        
          render() {
            const { id, className, style={}, styles={}, children } = this.props;

            return html`<div
                id=${id}
                ref=${el => (this.containerEl = el)}
                className=${`react-swipe-container ${className}`}
                style=${{...styles.container||{}, ...style}}
              >
                <div style=${styles.wrapper}>
                  ${children.map(child=>{
                    if (!child) {
                        return null;
                    }
                    // console.log(child.attributes);
                    const childStyle = child.attributes && child.attributes.style
                    ? { ...styles.child, ...child.attributes.style }
                    : styles.child;
                    child.attributes = {
                        ...child.attributes||{},
                        style: childStyle
                    };
                    // console.log(child);
                    return child;
                  })}
                </div>
              </div>`;
          }

    }


    ReactSwipe.defaultProps = {
      swipeOptions: {},
      styles: {
        container: {
          overflow: 'hidden',
          visibility: 'hidden',
          position: 'relative'
        },
        wrapper: {
          overflow: 'hidden',
          position: 'relative'
        },
        child: {
          float: 'left',
          width: '100%',
          position: 'relative',
          transitionProperty: 'transform'
        }
      },
      className: '',
      childCount: 0
    };


    return ReactSwipe;

});